{$layout}
{$template "menu"}
{$template "detail_menu"}

<form class="ui form" data-tea-action="$" data-tea-success="submitSuccess" style="margin-top:1em">
	<input type="hidden" name="wafId" :value="config.id"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">名称 *</td>
			<td>
				<input type="text" name="name" maxlength="100" v-model="config.name"/>
				<p class="comment">给策略起一个容易识别的名字</p>
			</td>
		</tr>
		<tr>
			<td>开启的规则分组</td>
			<td>
				<div class="groups-box">
					<div class="ui checkbox" v-for="group in groups">
						<input type="checkbox" name="groupCodes" :value="group.code" :id="'group-checkbox-' + group.code" v-model="group.isChecked"/>
						<label :for="'group-checkbox-' + group.code">{{group.name}}</label>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<a href="" v-if="!advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">更多选项 <i class="icon down angle"></i> </a>
				<a href="" v-if="advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">收起选项 <i class="icon up angle"></i> </a>
			</td>
		</tr>
		<tbody v-show="advancedOptionsVisible">
			<tr>
				<td>阻止动作配置<em>（Block）</em></td>
				<td>
					<table class="ui table selectable">
						<tr>
							<td class="title">HTTP状态码</td>
							<td>
								<input type="text" name="blockStatusCode" v-model="config.actionBlock.statusCode" value="" size="3" maxlength="3" style="width:4em" />
								<p class="comment">如果是444则直接关闭此终端连接。</p>
							</td>
						</tr>
						<tr>
							<td>响应内容</td>
							<td>
								<textarea name="blockBody" rows="6" v-model="config.actionBlock.body"></textarea>
								<p class="comment">支持HTML，为空表示使用默认的响应内容</p>
							</td>
						</tr>
						<tr>
							<td>URL或文件</td>
							<td>
								<input type="text" name="blockURL" v-model="config.actionBlock.url"/>
								<p class="comment">可以从URL或者一个本地文件中读取响应的内容。如果是本地文件，可以是绝对路径或者相对于TeaWeb安装目录。和响应内容二选一即可。</p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>匹配条件</td>
				<td>
					<request-cond-box prefix="request" :operators="condOperators" :variables="condVariables" :conds="config.cond"></request-cond-box>
					<p class="comment">满足以上条件时此策略才会生效。参数中可以使用一些内置的变量：<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">点击这里查看</a>，比如${arg.name}表示名为name的参数值</p>
				</td>
			</tr>
			<tr>
				<td>是否启用</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="on" value="1" v-model="config.on"/>
						<label></label>
					</div>
				</td>
			</tr>
		</tbody>
	</table>

	<button class="ui button primary" type="submit">保存</button> &nbsp; <a :href="'/proxy/waf/detail?wafId=' + config.id">返回</a>
</form>